<template>
  <div class="bottom-bar ">
    <nuxt-link :class="['home','btn-item',{active:active=='index'?true:false}]" to="/" >
      <div class="tab-icon"></div>
      <div class= "btn-name">首页</div>
    </nuxt-link>
    <nuxt-link :class="['order','btn-item',{active:active=='order'?true:false}]"  to="/order" >
      <div class="tab-icon"></div>
      <div class="btn-name">订单</div>
    </nuxt-link>
    <nuxt-link :class="['my','btn-item',{active:active=='my'?true:false}]" to="/my" >
      <div class="tab-icon"></div>
      <div class="btn-name">我的</div>
      </nuxt-link>
  </div>

</template>

<script>
  //首页底部
  export default {
    name: 'HomeFooter',
    computed: {
    },
    props:['active']
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/main.styl'

  .bottom-bar
    position: fixed;
    bottom: 0;
    z-index 9999;
    width: 100%;
    max-width:750px;
    margin:auto;
    height: 1.0rem;
    display: flex;
    border-top: 1px solid #b6b6b6;
    background-color: rgba(246,246,246,0.95);
    .btn-item
      text-decoration: none;
      display:block;
      flex: 1;
      font-size:12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #999;
      .tab-icon
        margin-bottom: 0.1rem;
        width: 0.45rem;
        height: 0.45rem;
        background-size: cover;

      &.active
        color: #000;

      &.my.active
        .tab-icon
          background-image: url('/app2/img/myIconActive.png');


      &.my
        .tab-icon
          background-image: url('/app2/img/myIcon.png');


      &.order
        .tab-icon
          background-image: url('/app2/img/orderIcon.png');


      &.order.active
        .tab-icon
          background-image: url('/app2/img/orderIconActive.png');


      &.home
        .tab-icon
          background-image: url('/app2/img/homeIcon.png');


      &.home.active
        .tab-icon
          background-image: url('/app2/img/homeIconActive.png');




</style>
